<template>
  <div id="forget" class="component-wrap">
    <Title :title-msg="titleMsg"></Title>
    <div class="forget-content">
      <form action="#">
        <div class="form-item">
          <input type="tel" placeholder="请输入手机号" v-model="phone" />
        </div>
        <div class="form-item">
          <input type="text" placeholder="请输入验证码" v-model="code" />
          <span v-show="codeShow" @click="getCode">获取验证码</span>
          <span v-show="!codeShow">{{codeCount}}s后重发</span>
        </div>
        <div class="next-btn" @click="next">下一步</div>
      </form>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Title from '@/components/common/Title.vue'

  export default {
    name: "forget",
    data:function(){
      return {
        phone: "",
        code: "",
        codeCount: '',
        codeShow: true,
        timer: null,
        titleMsg: {
          title: "找回密码",
          back: true,
          scan: false,
          search: false
        }
      }
    },
    methods: {
      next:function(){
        if(this.phone && this.code){
          this.$router.push({ path: '/login' })
        }
      },
      getCode:function(){
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.codeCount = TIME_COUNT;
          this.codeShow = false;
          this.timer = setInterval(() => {
            if (this.codeCount > 0 && this.codeCount <= TIME_COUNT) {
              this.codeCount--;
            } else {
              this.codeShow = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      }
    },
    components: {
      Title: Title
    }
  }
</script>

<style scoped>
  #forget .forget-content {
    width: 100%;
    margin-top: 6rem;
  }
  #forget .forget-content form {
    overflow: hidden;
  }
  #forget .forget-content form .form-item {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #fff;
  }
  #forget .forget-content form .form-item input {
    display: block;
    width: 92%;
    padding: 2.5rem 0;
    margin: 0 auto;
    font-size: 1.5rem;
    color: #171717;
    border: none;
    outline-style: none;
  }
  #forget .forget-content form .form-item:nth-of-type(1) input{
    border-bottom: 1px solid #eee;
  }
  #forget .forget-content form .form-item span {
    position: absolute;
    top: 2.5rem;
    right: 1.8rem;
    font-size: 1.2rem;
    color: #00CCCC;
    cursor: pointer;
  }
  #forget .forget-content form input::-webkit-input-placeholder {
    color: #999;
  }
  #forget .forget-content form .next-btn {
    width: 92%;
    margin: 4.8rem auto;
    padding: 1.4rem 0;
    text-align: center;
    font-size: 1.8rem;
    color: #FFFFFF;
    background: #2BB1FF;
    background-image: linear-gradient(44deg, #00CCCC 0%, #2BB1FF 100%);
    -webkit-box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    -moz-box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    -ms-box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    -o-box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    -webkit-border-radius: 2.2rem;
    -moz-border-radius: 2.2rem;
    -ms-border-radius: 2.2rem;
    -o-border-radius: 2.2rem;
    border-radius: 2.2rem;
    cursor: pointer;
  }
</style>
